<template>
  <div class="content">
    <div class="left">
      <div
        class="left__item"
        :class="{ 'left__item--active': activeTab === item.tab }"
        v-for="(item, index) in cateLsit"
        :key="index"
        @click="
          () => {
            handleLeft(item.tab);
          }
        "
      >
        {{ item.name }}
      </div>
    </div>
    <div class="right">
      <div class="right__item" v-for="item in dataList.list" :key="item._id">
        <div class="item__img">
          <img class="img" :src="item.imgUrl" alt="" />
        </div>
        <div class="item__txt">
          <p class="item__title">{{ item.name }}</p>
          <p class="item__sale">月售{{ item.sales }}件</p>
          <p class="item__price">
            <span>&yen;{{ item.price }} </span>
            <span class="discount">&yen;{{ item.oldPrice }}</span>
            <BtnNum
              :count="getItemNum(item)"
              @plus="
                () => {
                  addToCart(id, item._id, item, shopName);
                }
              "
              @minus="
                () => {
                  minusToCart(id, item._id, item, shopName);
                }
              "
            />
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BtnNum from "./BtnNum";
import { reactive, ref, watchEffect } from "vue";
import { get } from "@/API/axios.js";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import { useCommonCartEffect } from "@/effects/cartEffect";
const cateLsit = [
  {
    name: "全部商品",
    tab: "all",
  },
  {
    name: "秒杀",
    tab: "seckill",
  },
  {
    name: "新鲜水果",
    tab: "fruit",
  },
  {
    name: "休闲食品",
    tab: "food",
  },
  {
    name: "时令蔬菜",
    tab: "vege",
  },
  {
    name: "肉蛋家禽",
    tab: "meat",
  },
];

//handle click相关
const useHandleEffect = () => {
  const activeTab = ref(cateLsit[0].tab);
  const handleLeft = (tab) => {
    activeTab.value = tab;
  };
  return { activeTab, handleLeft };
};

//处理数据
const useDataListEffect = (activeTab) => {
  const dataList = reactive({ list: [] });
  const route = useRoute();
  const id = route.params.id;

  const getDataList = async () => {
    try {
      const res = await get(`/api/shop/${id}/product?tab=${activeTab.value}`);
      if (res.errno === 0) {
        dataList.list = res.data;
      }
    } catch (error) {
      console.log(error);
    }
  };
  const store = useStore();
  const cartStoreList = store.state.cartList;

  const getItemNum = (item) => {
    return cartStoreList[id]?.productList?.[item._id]?.count || 0;
  };

  watchEffect(() => {
    getDataList();
  });
  return { dataList, getDataList, id, getItemNum };
};

export default {
  name: "shopContent",
  components: { BtnNum },
  props: ["shopName"],

  setup() {
    // 获取路由
    const route = useRoute();
    const shopId = route.params.id;
    //处理左侧按钮
    const { activeTab, handleLeft } = useHandleEffect();
    //发送请求相关
    const { dataList, getDataList, id, getItemNum } =
      useDataListEffect(activeTab);
    // 返回store数据
    // const store = useStore();
    // const cartStoreList = store.state.cartList;
    const { addToCart, minusToCart } = useCommonCartEffect(shopId);

    return {
      cateLsit,
      dataList,
      activeTab,
      handleLeft,
      addToCart,
      minusToCart,
      id,
      getItemNum,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.content {
  display: flex;
  position: absolute;
  top: 1.6rem;
  left: 0;
  right: 0;
  bottom: 0.5rem;
}

.left {
  overflow-y: auto;
  height: 100%;
  background-color: #f5f5f5;
  &__item {
    width: 0.76rem;
    height: 0.4rem;
    font-size: 0.14rem;
    color: $content-color;
    text-align: center;
    line-height: 0.4rem;
    &--active {
      background-color: #fff;
    }
  }
}

.right {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  &__item {
    margin: 0 0.18rem 0 0.16rem;
    padding: 0.12rem 0 0.12rem 0;
    height: 0.92rem;
    width: 2.65rem;
    display: flex;
    align-items: center;
    border-bottom: solid 1px $bgc-color;
    .item__img {
      display: flex;
      justify-content: center;
      align-items: center;
      .img {
        height: 0.68rem;
        width: 0.68rem;
      }
    }
    .item__txt {
      height: 0.69rem;
      width: 100%;
      padding: 0 0 0 0.16rem;
      .item__title {
        line-height: 0.22rem;
        font-size: 0.14rem;
        color: $content-color;
      }
      .item__sale {
        line-height: 0.26rem;
        font-size: 0.12rem;
        color: $content-color;
      }
      .item__price {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 0.22rem;
        color: $highlight-color;
        .discount {
          text-decoration: line-through;
          color: $grey-color;
          font-size: 0.1rem;
          margin-right: 0.5rem;
        }
      }
    }
  }
}
</style>
